<template>
  <div class="">
    <el-row :gutter="10">
      <el-col :span="4">
        <el-page-header @back="goBack" content="返工维修"></el-page-header>
      </el-col>
      <el-col :span="2">
        <el-button
          type="success"
          icon="el-icon-circle-check"
          size="small "
          @click="retrunWork()"
        >
          立即返工
        </el-button>
      </el-col>
    </el-row>
    <div id="dynr">
      <el-row :gutter="10">
        <el-col :span="3">
          <h2>--- {{ list.serviceType }}</h2>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-input v-model="list.repairbillno" size="small " :readonly="rdy">
            <template slot="prepend">
              <div style="color: #000">维修单号</div>
            </template>
          </el-input></el-col
        >
        <el-col :span="5"
          ><el-input v-model="list.ulicense" size="small " :readonly="rdy">
            <template slot="prepend">
              <div style="color: #000">车牌号</div>
            </template>
          </el-input></el-col
        >
      </el-row>
      <br />
      <el-row :gutter="10">
        <el-col :span="5">
          <el-input v-model="list.redriver" size="small " :readonly="rdy">
            <template slot="prepend">
              <div style="color: #000">驾驶员</div>
            </template>
          </el-input></el-col
        >
        <el-col :span="5"
          ><el-input v-model="list.redriverphone" size="small " :readonly="rdy">
            <template slot="prepend">
              <div style="color: #000">驾驶员电话</div>
            </template>
          </el-input></el-col
        >
      </el-row>
      <br />

      <el-row :gutter="10">
        <el-col :span="5">
          <div
            class=""
            style="text-align: left; font-size: 17px; margin-bottom: 8px"
          >
            业务类别
          </div>
          <el-input v-model="list.sename" size="small " :readonly="rdy">
          </el-input>
        </el-col>

        <el-col :span="5">
          <div
            class=""
            style="text-align: left; font-size: 17px; margin-bottom: 8px"
          >
            施工班次
          </div>
          <el-input v-model="list.shiftsname" size="small " :readonly="rdy">
          </el-input>
        </el-col>

        <el-col :span="5">
          <div
            class=""
            style="text-align: left; font-size: 17px; margin-bottom: 8px"
          >
            结算方式
          </div>
          <el-input
            v-model="list.clearingformname"
            size="small "
            :readonly="rdy"
          >
          </el-input>
        </el-col>
      </el-row>
      <br />
      <el-row :gutter="10">
        <el-col :span="5">
          <div
            class=""
            style="text-align: left; font-size: 17px; margin-bottom: 8px"
          >
            进厂油量
          </div>
          <el-input v-model="list.oilmassname" size="small " :readonly="rdy">
          </el-input>
        </el-col>
      </el-row>
      <br />
      <el-row :gutter="10">
        <el-col :span="5">
          <div
            class=""
            style="text-align: left; font-size: 17px; margin-bottom: 8px"
          >
            接待备注
          </div>
          <el-input
            type="textarea"
            v-model="list.receptionnote"
            :readonly="rdy"
          >
          </el-input>
        </el-col>
        <el-col :span="5">
          <div
            class=""
            style="text-align: left; font-size: 17px; margin-bottom: 8px"
          >
            报修陈述
          </div>
          <el-input type="textarea" v-model="list.statement" :readonly="rdy">
          </el-input>
        </el-col>
      </el-row>
      <br />
      <el-row :gutter="10">
        <el-col :span="4">
          <h3>--- 操作菜单</h3>
        </el-col>
      </el-row>
      <template>
        <el-row>
          <el-col :span="15">
            <el-tabs
              v-model="activeName"
              type="border-card"
              @tab-click="handleClick"
            >
              <el-tab-pane label="添加项目" name="first">
                <el-form
                  :inline="true"
                  :model="repair"
                  class="demo-form-inline"
                >
                  <el-form-item label="项目" prop="serviceitemid">
                    <el-cascader
                      v-model="value"
                      :options="xm"
                      :props="xmProps"
                      :clearable="true"
                      :show-all-levels="false"
                      @change="handleChange2"
                    >
                    </el-cascader>
                  </el-form-item>
                  <el-form-item label="价类" prop="mnpricetypeid">
                    <el-select
                      v-model="wxxm.mnpricetypeid"
                      placeholder="请选择"
                    >
                      <el-option
                        :label="item.mnpricetypename"
                        :value="item.mnpricetypeid"
                        v-for="item in jl"
                        :key="item.mnpricetypeid"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="服务顾问" prop="armembername">
                    <el-input v-model="armembername" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="数量" prop="rbprojectsl">
                    <el-input-number
                      @change="price()"
                      v-model="wxxm.rbprojectsl"
                      min="0"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="价格" prop="yprice">
                    <el-input v-model="wxxm.yprice"></el-input>
                  </el-form-item>
                  <br />
                  <el-form-item label="故障描述" prop="rbprojectms">
                    <el-input
                      type="textarea"
                      rows="5"
                      v-model="wxxm.rbprojectms"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="故障原因" prop="rbprojectyy">
                    <el-input
                      type="textarea"
                      rows="5"
                      v-model="wxxm.rbprojectyy"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <el-button type="success" @click="tjxm">添加项目</el-button>
              </el-tab-pane>
              <el-tab-pane label="项目详情" name="second">
                <el-table :data="lscql">
                  <el-table-column label="项目编号">
                    <template slot-scope="temp">
                      {{ temp.$index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    property="rbprojectsl"
                    label="数量"
                  ></el-table-column>
                  <el-table-column
                    property="yprice"
                    label="原价"
                  ></el-table-column>
                  <el-table-column
                    property="yprices"
                    label="会员价"
                  ></el-table-column>
                  <el-table-column
                    property="rbprojectms"
                    label="故障描述"
                  ></el-table-column>
                  <el-table-column
                    property="rbprojectyy"
                    label="故障原因"
                  ></el-table-column>
                  <el-table-column
                    property="nocharge"
                    label="免单原因"
                  ></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="temp">
                      <el-button
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        @click="del(temp.row.rbprojectid)"
                      ></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>

              <el-tab-pane label="附加项目" name="third">
                <el-form
                  :inline="true"
                  :model="repair"
                  class="demo-form-inline"
                >
                  <el-form-item label="附加项目名称" prop="subjoinitemname">
                    <el-input
                      v-model="fjxm.subjoinitemname"
                      placeholder=""
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="价类" prop="mnpricetypeid">
                    <el-select
                      v-model="fjxm.mnpricetypeid"
                      placeholder="请选择"
                    >
                      <el-option
                        :label="item.mnpricetypename"
                        :value="item.mnpricetypeid"
                        v-for="item in jl"
                        :key="item.mnpricetypeid"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="预计时间" prop="subjointime">
                    <el-select v-model="fjxm.subjointime" placeholder="请选择">
                      <el-option label="1小时" value="1"></el-option>
                      <el-option label="2小时" value="2"></el-option>
                      <el-option label="3小时" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="价格"
                    prop="subjoinprice"
                    v-if="fjxm.mnpricetypeid != 2"
                  >
                    <el-input v-model="fjxm.subjoinprice"></el-input>
                  </el-form-item>
                  <br />
                  <el-form-item label="备注" prop="remark">
                    <el-input
                      type="textarea"
                      rows="5"
                      v-model="fjxm.remark"
                    ></el-input>
                  </el-form-item>
                  <br />
                  <el-button type="success" @click="addfjxm"
                    >添加项目</el-button
                  >
                </el-form>
                <el-table :data="fj">
                  <el-table-column label="项目序号">
                    <template slot-scope="temp">
                      {{ temp.$index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    property="subjoinitemname"
                    label="附件项目名称"
                  ></el-table-column>
                  <el-table-column
                    property="mnpricetypeid"
                    label="付款类型"
                  ></el-table-column>
                  <el-table-column
                    property="subjoinprice"
                    label="项目价格"
                  ></el-table-column>
                  <el-table-column
                    property="remark"
                    label="备注"
                  ></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="temp">
                      <el-button
                        type="danger"
                        icon="el-icon-delete"
                        @click="delSub(temp.row.subjoinitemid)"
                        circle
                      ></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </template>
    </div>
  </div>
</template>


</div>
</div>
</template>

<script>
export default {
  data() {
    //这里存放数据
    return {
      list: {},
      rid: "",
      rdy: true,
      index: "",
      activeName: "",
      lscql: [],
      lscse: [],
      lscprice: [],
      wxxm: {
        mnpricetypeid: "",
        serviceitemid: "",
        repairbillsno: "",
        artisansid: "",
        armemberid: "",
        rbprojectsl: 1,
        rbprojectms: "",
        rbprojectyy: "",
        yprice: 0,
        yprices: 0,
        nocharge: "",
      },
      fjxm: {
        repairbillsno: "",
        subjoinitemname: "",
        mnpricetypeid: "",
        subjoinprice: 0,
        remark: "",
        artisansid: "",
        subjointime: "",
      },
      bc: [],
      lx: [],
      js: [],
      yl: [],
      jl: [],
      ulicense: "",
      cpricesl: 0,
      armembername: "",
      xm: [],
      xmProps: {
        value: "serviceitemid",
        label: "senamex",
        expandTrigger: "hover",
        children: "serviceitems",
        emitPath: false,
      },
      fj: [],
    };
  },
  //计算属性
  computed: {},
  //方法集合
  methods: {
    handleClick(tab, event) {
      if (tab.index == 1) {
        this.queryXm();
      }
    },
    del(id) {
      let th = this;
      this.$confirm("是否删除此项目?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .delete("http://127.0.0.1:8080/api/rb/delxm", { params: { id } })
            .then((res) => {
              if (res.data.code == 200) {
                th.$message({
                  message: "删除成功",
                  type: "success",
                });

                th.queryXm();
              }
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    queryXm() {
      let th = this;
      this.$http
        .get("http://127.0.0.1:8080/api/rb", {
          params: {
            billNo: this.repair.repairbillno,
          },
        })
        .then((res) => {
          th.xms = res.data;
        });
    },
    goBack() {
      history.back();
    },
    xmxq() {
      let th = this;
      this.$http
        .get("http://localhost:8080/c/lscrpj/lscql", {
          params: {
            rid: th.rid,
          },
        })
        .then((resp) => {
          th.lscql = resp.data;
          // console.log(th.lscql)
        });
    },
    addfjxm() {
      this.fjxm.repairbillsno = this.list.repairbillno;
      let th = this;
      this.$http
        .post("http://127.0.0.1:8080/api/sub/addSub", this.fjxm)
        .then((res) => {
          console.log(res);
          if ((res.data.code = 200)) {
            th.$message({
              message: "添加成功",
              type: "success",
            });
            th.querySub(th.fjxm.repairbillsno);
            th.fjxm = {
              repairbillsno: "",
              subjoinitemname: "",
              mnpricetypeid: "",
              subjoinprice: 0,
              remark: "",
              artisansid: "",
              subjointime: "",
            };
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    querySub(id) {
      let th = this;
      this.$http
        .get("http://127.0.0.1:8080/api/sub", {
          params: {
            billNo: id,
          },
        })
        .then((res) => {
          th.fj = res.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    delSub(id) {
      let th = this;
      this.$confirm("是否删除此项目?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .delete("http://127.0.0.1:8080/api/sub/removeSub", {
              params: { id },
            })
            .then((res) => {
              if ((res.data.code = 200)) {
                th.$message({
                  message: "移除成功",
                  type: "success",
                });
                th.querySub(th.rid);
              }
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    xmquery() {
      let th = this;
      this.$http
        .get("http://127.0.0.1:8080/api/option/xm")
        .then((res) => {
          th.xm = res.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    tjxm() {
      this.wxxm.repairbillsno = this.list.repairbillno;
      console.info(this.wxxm);
      let th = this;
      this.$http
        .post("http://127.0.0.1:8080/api/rb/addr", this.wxxm)
        .then((res) => {
          console.log(res);
          if ((res.data.code = 200)) {
            th.$message({
              message: "添加成功",
              type: "success",
            });
            th.wxxm = {
              mnpricetypeid: "",
              serviceitemid: "",
              repairbillsno: "",
              artisansid: "",
              armemberid: "",
              rbprojectsl: 1,
              rbprojectms: "",
              rbprojectyy: "",
              yprice: 0,
              yprices: 0,
              nocharge: "",
            };
            th.queryXm();
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    fjxm() {
      let th = this;
      this.$http
        .get("http://localhost:8080/c/lscsvia/qrst", {
          params: {
            rid: th.rid,
          },
        })
        .then((resp) => {
          th.lscse = resp.data;
          // console.log(th.lscse)
        });
    },
    price() {
      this.wxxm.yprice = this.cpricesl * this.wxxm.rbprojectsl;
    },
    handleChange2(val) {
      console.info(val);
      let th = this;
      this.wxxm.serviceitemid = val;
      this.$http
        .get("http://127.0.0.1:8080/api/option/p", {
          params: { id: this.wxxm.serviceitemid },
        })
        .then((res) => {
          console.log(res);
          th.cpricesl = res.data.cpricesl;

          th.wxxm.yprice = th.cpricesl * th.wxxm.rbprojectsl;
          console.log(th.cpricesl);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    retrunWork() {
      let th = this;
      this.$http
        .get("http://127.0.0.1:8080/api/rep/modifyZt", {
          params: {
            billNo: this.rid,
            zt: 2,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            th.$message({
              message: "操作成功",
              type: "success",
            });
            history.back();
          }
        });
    },
  },
  //挂载完成（可以访问DOM元素）
  mounted() {
    let th = this;
    this.rid = this.$route.params.id;

    this.querySub(this.rid);
    this.$http
      .get("http://localhost:8080/c/rucf/qrxq", {
        params: {
          rid: th.rid,
        },
      })
      .then((resp) => {
        th.list = resp.data;
        // console.log(th.list)
      });
    this.$http
      .get("http://127.0.0.1:8080/api/option/jl")
      .then((res) => {
        th.jl = res.data;
      })
      .catch((err) => {
        console.error(err);
      });
    this.xmxq();
    this.xmquery();
  },
  //监控data中的数据变化
  watch: {},
};
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
</style>